<!-- 引用自 https://gitee.com/layui/layui/issues/I6V5VY -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../src/css/layui.css" href2="//cdn.staticfile.net/layui/2.9.6/css/layui.css"
    href3="https://cdn.jsdelivr.net/gh/layui/layui@879a9c629cc832f5b235d138adf164d74c34991b/src/css/layui.css" />
</head>

<body>
  <div class="layui-fluid" style="padding: 15px;">
    <button class="layui-btn" lay-on="asyncLoad">asyncLoad</button>
    <button class="layui-btn" lay-on="flatData">flatData</button>
    <table id="demo"></table>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
  <script src="../src/layui.js" src1="//cdn.staticfile.net/layui/2.9.7/layui.js"
    src1="https://cdn.jsdelivr.net/gh/layui/layui@879a9c629cc832f5b235d138adf164d74c34991b/src/layui.js"></script>
  <script>
    layui.use(["treeTable", "util"], function () {
      var treeTable = layui.treeTable;
      var util = layui.util;

      treeTable.set({

      });

      util.on({
        asyncLoad: function () {
          treeTable.reload('demo', {
            url: "/getDatas",
            tree: {
              data: {
                isSimpleData: false
              },
              async: {
                enable: true,
                autoParam: ["parentId=id"]
              }
            },
          }, true)
        },
        flatData: function () {
          treeTable.reload('demo', {
            data: testDatas,
            url: false,
            tree: {
              data: {
                isSimpleData: true
              },
              async: {
                enable: false,
                autoParam: ["parentId=id"]
              }
            },
          }, true)
        }
      })

      // 生成随机ID函数
      const createId = (() => {
        let nextId = 1;
        return () => nextId++;
      })();

      // 生成节点函数
      const createNode = (parentId = null, level = 0) => {
        const id = createId();
        const children =
          level < 3
            ? Mock.mock({
              "array|0-5": [createNode.bind(null, id, level + 1)]
            }).array
            : [];

        return {
          id,
          name: `User${id}`,
          type: Mock.mock("@d6"),
          status: Mock.Random.d4(),
          score: Mock.Random.d100(),
          experience: Mock.Random.integer(1000, 99999),
          sex: Mock.Random.cword("男女", 1),
          city: Mock.Random.city(),
          description: Mock.mock("@cparagraph"),
          createTime: Mock.mock("@datetime"),
          parentId,
          children,
          isParent: !!children.length
        };
      };

      // 生成树
      const rootNodes = Mock.mock({
        "array|10-20": [createNode]
      }).array;

      // 将树展开
      const flattenTree = (nodes, parentId = null) => {
        let result = [];
        nodes.forEach((node) => {
          result.push({
            ...node,
            parentId,
            children: undefined
          });
          if (node.children.length > 0) {
            result = result.concat(flattenTree(node.children, node.id));
          }
        });
        return result;
      };

      const getTreeData = function (nodes) {
        let result = [];
        nodes.forEach((node) => {
          result.push({
            ...node,
            parentId: null,
            children: getTreeData(node.children)
          });
        });
        return result;
      };

      var testDatas = flattenTree(rootNodes);
      //var testDatas = getTreeData(rootNodes);

      Mock.mock(/getDatas/, "get", (config) => {
        console.log(config);
        var params = layui.url(config.url);
        var search = params.search;
        var parentId = search.parentId;
        var dataRet = testDatas.filter(function (value, index, array) {
          return value.parentId == parentId;
        });

        var sortColumn = search.sortColumn;
        var sortType = search.sortType;

        dataRet = layui.sort(dataRet, sortColumn, sortType === "desc");

        var curr = search.page;
        if (!curr) {
          curr = 1;
        } else {
          curr = parseInt(curr);
          curr = curr || 1;
        }
        var limit = search.limit;
        if (!limit) {
          limit = dataRet.length;
        } else {
          limit = parseInt(limit);
          limit = limit || dataRet.length;
        }
        var start = (curr - 1) * limit;

        return {
          code: 0,
          data: dataRet.slice(start, start + limit),
          count: dataRet.length
        };
      });

      treeTable.render({
        elem: "#demo",
        url: "/getDatas",
        totalRow: true,
        tree: {
          async: {
            enable: true,
            autoParam: ["parentId=id"]
          }
        },
        maxHeight: "full-95",
        cols: [
          [
            { type: "numbers", fixed: "left" },
            {
              field: "id",
              title: "ID",
              width: 145,
              sort: true,
              fixed: "left",
              totalRow: "合计："
            },
            { field: "name", title: "用户名", width: 180, fixed: "left" },
            {
              field: "experience",
              title: "积分",
              width: 90,
              sort: true,
              totalRow: "{{= d.TOTAL_NUMS }}"
            },
            { field: "sex", title: "性别", width: 80, sort: true },
            {
              field: "score",
              title: "评分",
              width: 80,
              sort: true,
              totalRow: true
            },
            { field: "city", title: "城市", width: 150, templet: "#tpl1" },
            {
              field: "description",
              title: "描述信息",
              minWidth: 200,
              templet: "#tpl2"
            },
            { field: "createTime", title: "创建时间", width: 170 }
          ]
        ],
        done: function (res, curr, count) {
          console.log('渲染完成', res, curr, count, this);
        }
      });
    });

  </script>
</body>

</html>
